<template>

  <van-nav-bar
      title="问题发布"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />

  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="title"
          label="标题"
          placeholder="请输入文章标题"
          required
      />
    </van-cell-group>

    <van-field name="radio" label="悬赏金额">
      <template #input>
        <van-radio-group v-model="money" direction="horizontal">
          <van-radio name="0">免费</van-radio>
          <van-radio name="3">3学币</van-radio>
          <van-radio name="5">5学币</van-radio>
        </van-radio-group>
      </template>
    </van-field>

    <!-- 新增文本框用于输入文章内容 -->
    <van-field
        v-model="content"
        label="内容"
        type="textarea"
        rows="5"
        autosize
        placeholder="请输入文章内容"
        required
    />
    <div class="image-upload">
      <van-uploader
          :after-read="handleRead"
          :max-size="5 * 1024 * 1024"
          :upload-text="'点击上传'"
      />

    </div>

    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        发布
      </van-button>
    </div>

    <!-- 添加发帖规范提示及跳转链接 -->
    <div style="text-align: center; margin-top: 8px;">
      <van-button size="small" type="default" @click="toGuidelines">
        发帖规范
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
import {ref} from "vue";
import {showToast} from "vant";
import {useRouter} from "vue-router";
import {get,post} from "../../util/request";
import {postFile} from "../../util/reqeustfile";



const router = useRouter();
const title = ref('');
const money = ref('0'); // 默认免费
const content = ref('');
const urlList = ref([]);



const onClickLeft = () => history.back();


const toGuidelines = () => {
  router.push('/message');
}


const onSubmit = () => {

  if (!content.value.trim()) {
    showToast('内容不能为空'); // 使用Toast提示用户
    return; // 阻止后续操作
  };

  // 发送请求到后端接口
  post('circle/problem/addProblem', {
    title: title.value,
    money: money.value,
    content: content.value,
    urlList: urlList.value
  })
      .then(response => {

        if (response.data.code == 0) {
          console.log('Article created successfully');
          // 这里可以根据需要处理成功的逻辑，比如显示提示信息


          // 携带响应中的数据发起第二个请求
          const problemId = response.data.data.id; // 假设id是您想从响应中获取的数据
          return post('study/static/addProblemImg', {
            problemId: problemId,// 将需要的数据作为请求体传递
            urlList: urlList.value

          });

          // 清空数据
          title.value = '';
          money.value = '0';
          content.value = '';
          urlList.value = [];
        } else {
          // 如果第一个请求没有成功，根据情况处理
        }
      })
      .then(secondResponse => {
        // 第二个请求成功的处理逻辑
        console.log('Second request successful:', secondResponse.data);
      })
      .catch(error => {
        // 捕获任何请求过程中的错误
        console.error('Error in request:', error);
        // 可以在这里统一处理错误，如显示错误消息给用户
      });
};


const handleRead =( async (file) =>{
  // console.log(file)
  // console.log(file.file)
  // const formData = new FormData();
  // formData.append('file', file.file); // 确保file.file是正确的，如果file就是文件对象，则应该是formData.append('file', file);

  // 发送POST请求到您的后端接口，确保传递formData且不包含多余的headers配置
  const response = await postFile('study/article/upload', file);
  urlList.value.push(response.data.data);
  console.log(urlList.value);
  // 这里可以根据需要处理成功的逻辑，比如显示提示信息
});
</script>

<style scoped>
.image-upload {
  /* Your custom styles */
}
</style>